<section class="weather__card" (click)="openDetails()" [ngClass]="{'weather__card-dark': darkMode}">
  <!-- TODO: make the city name dynamic -->
  <button class="add-city-btn" *ngIf="addMode" (click)="addCity()">ADD CITY +</button>

  <div *ngIf="cityAdded" class="city-added-note">
    <h5 class="add-success-text">City has been successfully added!</h5>
    <svg viewBox="0 0 50 50" height="5rem">
      <circle cx="25" cy="25" r="25" fill="#25ae88" />
      <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
        stroke-width="2" d="M38 15L22 33l-10-8" />
    </svg>
  </div>

  <span class="city-name__text">{{cityName}}</span>
  <div class="weather-icon__container" [ngSwitch]="true">

    <svg *ngSwitchCase="state === 'Clouds'" viewBox="2436.9 -843.1 275.5 274.1">
      <g data-name="cloudy icon" transform="translate(84 790)">
        <circle cx="137" cy="137" r="137" fill="#fff" data-name="Ellipse 23" transform="translate(2354 -1633)"/>
        <path fill="#ffde17"
              d="M2523.4-1361.5a37.2 37.2 0 0 0 8.4-23.4c0-22-19.8-40-44.1-40l-3.4.1h-.5a39.8 39.8 0 0 0-39.4-33.7 40.1 40.1 0 0 0-10 1.2 40 40 0 0 0-35.2-21.2 40.1 40.1 0 0 0-38.5 29 137.4 137.4 0 0 1-7.8-45.8 138.8 138.8 0 0 1 2.8-27.8 137 137 0 0 1 8-25.8 137.8 137.8 0 0 1 12.7-23.4 138.8 138.8 0 0 1 16.8-20.4 138.8 138.8 0 0 1 20.4-16.9 137.8 137.8 0 0 1 23.4-12.7 137 137 0 0 1 25.9-8 138.8 138.8 0 0 1 27.7-2.8 138.8 138.8 0 0 1 27.8 2.8 137 137 0 0 1 25.9 8 137.8 137.8 0 0 1 23.4 12.7 138.8 138.8 0 0 1 20.4 16.9 138.7 138.7 0 0 1 16.8 20.4 137.8 137.8 0 0 1 12.7 23.4 137 137 0 0 1 8 25.8 138.8 138.8 0 0 1 2.8 27.8 137.4 137.4 0 0 1-8 46.1 137.2 137.2 0 0 1-21.9 39.6 138.2 138.2 0 0 1-33.2 30.1 136.8 136.8 0 0 1-41.9 18z"
              data-name="Subtraction 1"/>
      </g>
    </svg>

    <svg *ngSwitchCase="state === 'Rain' || state === 'Drizzle'" viewBox="3170 -843.1 163.5 242.7">
      <g data-name="Rain Icon">
        <g data-name="Water Drops">
          <path fill="#0032cc" d="M3295.4-824.5s85.8 133.5 0 133.5 0-133.5 0-133.5z" data-name="Path 7"/>
          <path fill="#003eff" d="M3239.4-843s-156.1 242.6 0 242.6 0-242.7 0-242.7z" data-name="Path 3"/>
        </g>
      </g>
    </svg>

    <svg *ngSwitchCase="state === 'Storm' || state === 'Thunderstorm'" viewBox="3487.9 -810.7 291.2 200.3">
      <g data-name="Strom icon" transform="translate(1959 -1260.7)">
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 14" rx="55.3" ry="51.7"
                 transform="translate(1529 490.4)"/>
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 15" rx="55.3" ry="51.7"
                 transform="translate(1569.6 467.8)"/>
        <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 16"
                transform="translate(1618.9 476.8)"/>
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 17" rx="55.3" ry="51.7"
                 transform="translate(1631.8 450)"/>
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 18" rx="55.3" ry="51.7"
                 transform="translate(1687.1 477.5)"/>
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 19" rx="55.3" ry="51.7"
                 transform="translate(1709.6 507.3)"/>
        <circle cx="55.3" cy="55.3" r="55.3" class="cls-1" data-name="Ellipse 20"
                transform="translate(1639.6 500.1)"/>
        <ellipse cx="55.3" cy="51.7" class="cls-1" data-name="Ellipse 21" rx="55.3" ry="51.7"
                 transform="translate(1569.6 507.3)"/>
        <path fill="none" stroke="#fd0" stroke-width="18"
              d="M1732.5 644l-61.4-61.4 22.5-10.3 26.8 5.1 9.5-22.4-38-37.2" data-name="Path 59"/>
        <path fill="none" stroke="#fd0" stroke-width="15" d="M1597.2 539.5l31.2 25.9-24.8 22.2 17.3 36.2"
              data-name="Path 60"/>
      </g>
    </svg>

    <svg *ngSwitchCase="state === 'Sunny' || state === 'Clear'" viewBox="2050 -845 262 262">
      <circle cx="131" cy="131" r="131" fill="#ffde17" data-name="Sun Icon" transform="translate(2050 -845)"/>
    </svg>

    <svg  *ngSwitchCase="state === 'Fog'"  viewBox="4231.384 -1107 1212.187 972"><defs><style>.a{fill:#fdccb9;}.a,.b{opacity:0.14;}.b{fill:#ff4d00;}.c{fill:#f8f5ff;}.d{filter:url(#ci);}.e{filter:url(#cg);}.f{filter:url(#ce);}.g{filter:url(#cc);}.h{filter:url(#ca);}.i{filter:url(#by);}.j{filter:url(#bw);}.k{filter:url(#bu);}.l{filter:url(#bs);}.m{filter:url(#bq);}.n{filter:url(#bo);}.o{filter:url(#bm);}.p{filter:url(#bk);}.q{filter:url(#bi);}.r{filter:url(#bg);}.s{filter:url(#be);}.t{filter:url(#bc);}.u{filter:url(#ba);}.v{filter:url(#ay);}.w{filter:url(#aw);}.x{filter:url(#au);}.y{filter:url(#as);}.z{filter:url(#aq);}.aa{filter:url(#ao);}.ab{filter:url(#am);}.ac{filter:url(#ak);}.ad{filter:url(#ai);}.ae{filter:url(#ag);}.af{filter:url(#ae);}.ag{filter:url(#ac);}.ah{filter:url(#aa);}.ai{filter:url(#y);}.aj{filter:url(#w);}.ak{filter:url(#u);}.al{filter:url(#s);}.am{filter:url(#q);}.an{filter:url(#o);}.ao{filter:url(#m);}.ap{filter:url(#k);}.aq{filter:url(#i);}.ar{filter:url(#g);}.as{filter:url(#e);}.at{filter:url(#c);}.au{filter:url(#a);}</style><filter id="a" x="4569.309" y="-542.032" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="b"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter><filter id="c" x="4231.384" y="-505.911" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="d"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="d"/><feComposite in="SourceGraphic"/></filter><filter id="e" x="4496.497" y="-422.678" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="f"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="f"/><feComposite in="SourceGraphic"/></filter><filter id="g" x="4322.867" y="-424.248" width="263.758" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="h"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="h"/><feComposite in="SourceGraphic"/></filter><filter id="i" x="4993.115" y="-505.911" width="213.349" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="j"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="j"/><feComposite in="SourceGraphic"/></filter><filter id="k" x="4321" y="-584.434" width="192.813" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="l"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="l"/><feComposite in="SourceGraphic"/></filter><filter id="m" x="4800.815" y="-584.434" width="416.851" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="n"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="n"/><feComposite in="SourceGraphic"/></filter><filter id="o" x="4685.062" y="-463.509" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="p"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="p"/><feComposite in="SourceGraphic"/></filter><filter id="q" x="4330.334" y="-505.911" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="r"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="r"/><feComposite in="SourceGraphic"/></filter><filter id="s" x="4638.387" y="-542.032" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="t"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="t"/><feComposite in="SourceGraphic"/></filter><filter id="u" x="4410.615" y="-584.434" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="v"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="v"/><feComposite in="SourceGraphic"/></filter><filter id="w" x="4593.58" y="-422.678" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="x"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="x"/><feComposite in="SourceGraphic"/></filter><filter id="y" x="4255.655" y="-386.557" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="z"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="z"/><feComposite in="SourceGraphic"/></filter><filter id="aa" x="4520.768" y="-303.323" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ab"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ab"/><feComposite in="SourceGraphic"/></filter><filter id="ac" x="4347.138" y="-304.894" width="263.758" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ad"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ad"/><feComposite in="SourceGraphic"/></filter><filter id="ae" x="5017.386" y="-386.557" width="213.349" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="af"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="af"/><feComposite in="SourceGraphic"/></filter><filter id="ag" x="4345.271" y="-465.08" width="192.813" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ah"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ah"/><feComposite in="SourceGraphic"/></filter><filter id="ai" x="4825.086" y="-465.08" width="416.851" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="aj"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="aj"/><feComposite in="SourceGraphic"/></filter><filter id="ak" x="4709.333" y="-344.155" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="al"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="al"/><feComposite in="SourceGraphic"/></filter><filter id="am" x="4354.605" y="-386.557" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="an"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="an"/><feComposite in="SourceGraphic"/></filter><filter id="ao" x="4662.658" y="-422.678" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ap"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ap"/><feComposite in="SourceGraphic"/></filter><filter id="aq" x="4434.886" y="-465.08" width="734.238" height="138.845" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ar"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ar"/><feComposite in="SourceGraphic"/></filter><filter id="as" x="4815.094" y="-807.95" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="at"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="at"/><feComposite in="SourceGraphic"/></filter><filter id="au" x="4976.851" y="-833.234" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="av"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="av"/><feComposite in="SourceGraphic"/></filter><filter id="aw" x="4849.948" y="-891.497" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ax"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="ax"/><feComposite in="SourceGraphic"/></filter><filter id="ay" x="5158.27" y="-890.398" width="188.814" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="az"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="az"/><feComposite in="SourceGraphic"/></filter><filter id="ba" x="4861.566" y="-833.234" width="164.684" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bb"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bb"/><feComposite in="SourceGraphic"/></filter><filter id="bc" x="5193.123" y="-778.269" width="154.854" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bd"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bd"/><feComposite in="SourceGraphic"/></filter><filter id="be" x="4856.204" y="-778.269" width="262.096" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bf"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bf"/><feComposite in="SourceGraphic"/></filter><filter id="bg" x="4759.686" y="-862.916" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bh"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bh"/><feComposite in="SourceGraphic"/></filter><filter id="bi" x="4929.486" y="-833.234" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bj"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bj"/><feComposite in="SourceGraphic"/></filter><filter id="bk" x="4782.028" y="-807.95" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bl"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bl"/><feComposite in="SourceGraphic"/></filter><filter id="bm" x="4891.057" y="-778.269" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bn"/><feFlood flood-color="#2300ff" flood-opacity="0.102"/><feComposite operator="in" in2="bn"/><feComposite in="SourceGraphic"/></filter><filter id="bo" x="4803.476" y="-891.497" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bp"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="bp"/><feComposite in="SourceGraphic"/></filter><filter id="bq" x="4965.233" y="-916.782" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="br"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="br"/><feComposite in="SourceGraphic"/></filter><filter id="bs" x="4838.33" y="-975.045" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bt"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="bt"/><feComposite in="SourceGraphic"/></filter><filter id="bu" x="5146.651" y="-973.946" width="188.814" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bv"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="bv"/><feComposite in="SourceGraphic"/></filter><filter id="bw" x="4849.948" y="-916.782" width="164.684" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bx"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="bx"/><feComposite in="SourceGraphic"/></filter><filter id="by" x="5181.505" y="-861.816" width="154.854" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="bz"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="bz"/><feComposite in="SourceGraphic"/></filter><filter id="ca" x="4844.585" y="-861.816" width="262.096" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="cb"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="cb"/><feComposite in="SourceGraphic"/></filter><filter id="cc" x="4748.067" y="-946.463" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="cd"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="cd"/><feComposite in="SourceGraphic"/></filter><filter id="ce" x="4917.868" y="-916.782" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="cf"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="cf"/><feComposite in="SourceGraphic"/></filter><filter id="cg" x="4770.41" y="-891.497" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="ch"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="ch"/><feComposite in="SourceGraphic"/></filter><filter id="ci" x="4879.439" y="-861.816" width="414.022" height="133.192" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="20" result="cj"/><feFlood flood-color="#3a00ff" flood-opacity="0.102"/><feComposite operator="in" in2="cj"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-205.628 -183)"><circle class="a" cx="486" cy="486" r="486" transform="translate(4527.468 -924)"/><circle class="a" cx="413.822" cy="413.822" r="413.822" transform="translate(4599.646 -851.822)"/><circle class="a" cx="357.683" cy="357.683" r="357.683" transform="translate(4655.784 -795.683)"/><circle class="b" cx="307.549" cy="307.549" r="307.549" transform="translate(4706.008 -745.279)"/><g transform="translate(4514.646 -569.996)"><g transform="translate(6.814 37.733)"><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(32.495 37.732)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(127.361 26.313)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(52.936)"/><rect class="c" width="40.357" height="5.958" rx="2.979" transform="translate(233.757 0.496)"/><rect class="c" width="26.206" height="5.958" rx="2.979" transform="translate(59.75 26.313)"/><rect class="c" width="20.441" height="5.958" rx="2.979" transform="translate(254.198 51.137)"/><rect class="c" width="83.335" height="5.958" rx="2.979" transform="translate(56.605 51.137)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(0 12.908)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(99.583 26.313)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(13.103 37.732)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(77.046 51.137)"/></g><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(32.495 37.732)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(127.361 26.313)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(52.936)"/><rect class="c" width="40.357" height="5.958" rx="2.979" transform="translate(233.757 0.496)"/><rect class="c" width="26.206" height="5.958" rx="2.979" transform="translate(59.75 26.313)"/><rect class="c" width="20.441" height="5.958" rx="2.979" transform="translate(254.198 51.137)"/><rect class="c" width="83.335" height="5.958" rx="2.979" transform="translate(56.605 51.137)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(0 12.908)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(99.583 26.313)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(13.103 37.732)"/><rect class="c" width="172.435" height="5.958" rx="2.979" transform="translate(77.046 51.137)"/></g><g transform="translate(5589.199 -41.478) rotate(180)"><g transform="translate(24.271 119.354)"><g class="au" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5243.55 -463.19) rotate(180)"/></g><g class="at" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(4905.62 -427.07) rotate(180)"/></g><g class="as" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5170.74 -343.83) rotate(180)"/></g><g class="ar" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="143.758" height="18.845" rx="9.423" transform="translate(4526.62 -345.4) rotate(180)"/></g><g class="aq" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="93.349" height="18.845" rx="9.423" transform="translate(5146.46 -427.07) rotate(180)"/></g><g class="ap" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="72.812" height="18.845" rx="9.423" transform="translate(4453.81 -505.59) rotate(180)"/></g><g class="ao" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="296.851" height="18.845" rx="9.423" transform="translate(5157.67 -505.59) rotate(180)"/></g><g class="an" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5359.3 -384.66) rotate(180)"/></g><g class="am" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5004.57 -427.07) rotate(180)"/></g><g class="al" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5312.63 -463.19) rotate(180)"/></g><g class="ak" transform="matrix(-1, 0, 0, -1, 5359.3, -343.83)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5084.85 -505.59) rotate(180)"/></g></g><g class="aj" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5267.82 -343.83) rotate(180)"/></g><g class="ai" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(4929.89 -307.71) rotate(180)"/></g><g class="ah" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5195.01 -224.48) rotate(180)"/></g><g class="ag" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="143.758" height="18.845" rx="9.423" transform="translate(4550.9 -226.05) rotate(180)"/></g><g class="af" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="93.349" height="18.845" rx="9.423" transform="translate(5170.74 -307.71) rotate(180)"/></g><g class="ae" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="72.812" height="18.845" rx="9.423" transform="translate(4478.08 -386.23) rotate(180)"/></g><g class="ad" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="296.851" height="18.845" rx="9.423" transform="translate(5181.94 -386.23) rotate(180)"/></g><g class="ac" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5383.57 -265.31) rotate(180)"/></g><g class="ab" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5028.84 -307.71) rotate(180)"/></g><g class="aa" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5336.9 -343.83) rotate(180)"/></g><g class="z" transform="matrix(-1, 0, 0, -1, 5383.57, -224.48)"><rect class="c" width="614.238" height="18.845" rx="9.423" transform="translate(5109.12 -386.23) rotate(180)"/></g></g><g transform="translate(5013.695 -732.045)"><g transform="translate(11.618 83.547)"><g class="y" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4875.09 -747.95)"/></g><g class="x" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(5036.85 -773.23)"/></g><g class="w" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4909.95 -831.5)"/></g><g class="v" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="68.814" height="13.192" rx="6.596" transform="translate(5218.27 -830.4)"/></g><g class="u" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="44.684" height="13.192" rx="6.596" transform="translate(4921.57 -773.23)"/></g><g class="t" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="34.854" height="13.192" rx="6.596" transform="translate(5253.12 -718.27)"/></g><g class="s" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="142.096" height="13.192" rx="6.596" transform="translate(4916.2 -718.27)"/></g><g class="r" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4819.69 -802.92)"/></g><g class="q" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4989.49 -773.23)"/></g><g class="p" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4842.03 -747.95)"/></g><g class="o" transform="matrix(1, 0, 0, 1, -4819.69, 831.5)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4951.06 -718.27)"/></g></g><g transform="translate(0)"><g class="n" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4863.48 -831.5)"/></g><g class="m" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(5025.23 -856.78)"/></g><g class="l" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4898.33 -915.04)"/></g><g class="k" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="68.814" height="13.192" rx="6.596" transform="translate(5206.65 -913.95)"/></g><g class="j" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="44.684" height="13.192" rx="6.596" transform="translate(4909.95 -856.78)"/></g><g class="i" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="34.854" height="13.192" rx="6.596" transform="translate(5241.51 -801.82)"/></g><g class="h" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="142.096" height="13.192" rx="6.596" transform="translate(4904.59 -801.82)"/></g><g class="g" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4808.07 -886.46)"/></g><g class="f" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4977.87 -856.78)"/></g><g class="e" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4830.41 -831.5)"/></g><g class="d" transform="matrix(1, 0, 0, 1, -4808.07, 915.04)"><rect class="c" width="294.023" height="13.192" rx="6.596" transform="translate(4939.44 -801.82)"/></g></g></g></g></svg>

    <svg *ngSwitchCase="state === 'Haze' || state === 'Fog'" viewBox="0 0 454 366">
      <path fill="#12bcff"
        d="M340 110c-40 0-75-14-110-26-30-11-61-21-92-27-35-6-65 6-89 34a28 28 0 0 1-40 3C-3 83-3 66 8 54 53 1 110-9 174 7c36 9 71 25 106 36 19 5 39 10 58 11 27 2 48-13 65-33 12-13 29-15 41-5s13 28 1 41c-28 33-63 53-105 53zM120 312c-27-1-51 11-70 34-11 13-29 15-41 4-12-10-12-28-1-40 45-53 103-63 167-47 37 10 72 25 108 36 18 6 37 10 55 11 27 2 47-12 64-32 8-9 17-15 30-12 21 4 29 28 16 45-37 45-85 65-143 51-34-8-66-21-99-32-27-9-53-18-86-18zM123 128c42 1 81 15 120 29 26 9 52 18 79 24 28 6 53-3 74-24l11-11c11-11 27-11 39-1 10 10 11 26 1 38-35 43-81 64-137 52-34-7-67-20-100-32-29-10-59-20-91-19-28 1-51 13-69 34-12 13-29 15-41 4s-12-28 0-41c30-35 68-52 114-53z" />
    </svg>
  </div>
  <div class="temperature-text__container">
    <span class="temperature__text">{{ currentTemp }}</span>
    <span class="temperature-metric__text">°</span>
    <span class="weather-condition__text">{{ state }}</span>
  </div>
  <section class="min-max__container">
    <div class="min__container">
      <svg class="min-arrow__icon" viewBox="188.5 807 21 21">
        <path fill="#00ff9b" d="M209.5 817.5h-21L199 828z" data-name="Min Arrow" />
      </svg>

      <span class="min-temperature__text">{{ minTemp }}</span>
      <span class="min__text">Min</span>
    </div>
    <div class="max__container">
      <svg class="max-arrow__icon" viewBox="449.5 820 21 21">
        <path fill="red" d="M449.5 830.5h21L460 820z" data-name="Max Arrow" />
      </svg>
      <span class="max-temperature__text">{{ maxTemp }}</span>
      <span class="max__text">Max</span>
    </div>
  </section>
</section>
